<template>
  <el-tabs
    v-model="data.activeName"
    type="card"
    closable
    @tab-click="handleClickTab"
    @tab-remove="removeTab"
    @click.right="rowContextmenu"
  >
    <el-tab-pane
      v-for="item in data.openedTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
    </el-tab-pane>
  </el-tabs>
  <ContextMenu
    v-show="menuVisible"
    ref="contextButton"
    @foo="foo"
    @handleClose="handleClose"
    @handleCloseAll="handleCloseAll"
  />
</template>
<script setup>
import { reactive, ref, computed, watch, onMounted, nextTick } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import ContextMenu from './ContextMenu.vue';

const store = useStore();
const router = useRouter();
const data = reactive({
  activeName: store.state.activeTab.name,
  openedTabs: store.state.openedTabs,
});

const menuVisible = ref(false);
const contextButton = ref();

const rowContextmenu = (event) => {
  menuVisible.value = true;
  // console.log(event.target.id);
  // console.log(event.target.innerText);
  // 阻止右键默认行为
  event.preventDefault();
  nextTick(() => {
    contextButton.value.init(event);
  });
};
// 任意位置关闭右键弹框
const foo = () => {
  menuVisible.value = false;
  document.removeEventListener('click', foo);
};
// 右键关闭当前
const handleClose = (targetName) => {
  removeTab(targetName);
};
// 右键关闭全部
const handleCloseAll = () => {
  let menuInfo = { title: '首页', name: '/welcome' };
  store.commit('removeTabAll', menuInfo);
  data.openedTabs = [menuInfo];
  router.push('/welcome');
};

// 标签点击
const handleClickTab = (tabName) => {
  const { label, name } = tabName.props;
  store.commit('changeTab', { title: label, name: name });
  router.push(name);
};

const openedTabs = computed(() => store.state.openedTabs);
watch(
  () => openedTabs.value.length,
  (newValue, oldValue) => {
    // 如果是新增的标签
    if (openedTabs.value.length > data.openedTabs.length) {
      // 添加数组的最后一项
      let newTab = openedTabs.value[oldValue];
      data.openedTabs.push(newTab);
      // 设置当前标签的active
      data.activeName = newTab.name;
    }
  }
);
const activeTab = computed(() => store.state.activeTab);
watch(
  () => activeTab.value.name,
  () => {
    if (activeTab.value.name !== data.activeName) {
      // 标签已存在则设为活动状态
      data.activeName = activeTab.value.name;
    }
  }
);

// targetName被删除的标签的 name
const removeTab = (targetName) => {
  const tabs = data.openedTabs;
  let activeName = data.activeName;
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        // 选中状态的前提下：判断关闭的是否为最后一个标签,当为最后一个标签时tabs[index + 1]返回false,tabs[index - 1]成立，反之亦然
        const nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          // 当标签关闭后设置下一个为选中的状态
          activeName = nextTab.name;
        }
      }
    });
  }
  store.commit('removeTab', targetName);
  router.push(activeName);
  data.activeName = activeName;
  data.openedTabs = tabs.filter((tab) => tab.name !== targetName);
  // 首页不能关闭
  if (data.openedTabs.length === 0) {
    handleCloseAll();
  }
};
</script>
